<template>
  <div class="lz-dialog">
    <el-dialog
      v-model="_options.dialogShow"
      :width="_options.width"
      :center="_options.center"
      :align-center="_options.alignCenter"
      :draggable="_options.draggable"
      :fullscreen="_options.fullscreen"
      @close="handelButton({ type: 'cancel' })"
      :close-on-click-modal="_options.closeOnClickModal"
    >
      <template #header>
        <slot name="dialogHeader" v-if="_options.isSlotHeader"></slot>
        <p :style="`text-align: ${_options.titleAlign}`" v-else>
          {{ _options.title }}
        </p>
      </template>
      <slot name="dialogContaint"></slot>
      <template #footer>
        <span v-if="_options.isFooter" class="dialog-footer">
          <el-button
            v-for="(item, index) in _options.footButtonList"
            :key="index"
            :type="item.buttonType"
            :loading="item.btnLoading"
            @click="handelButton(item)"
          >
            {{ item.btnLoading ? item.btnLoadingText : item.btnText }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 父组件传递数据
const props = defineProps({
  dialogObject: {
    default() {
      return {};
    },
    type: Object,
  },
});

// 配置
const _options = computed(() => {
  const option = {
    dialogShow: false,
    isSlotHeader: false, // 如果想自定义头部需要将此值设为true 相应title、titleAlign属性无效
    title: '标题',
    titleAlign: 'left',
    width: '30%',
    center: true,
    alignCenter: false,
    draggable: false,
    fullscreen: false,
    closeOnClickModal: true,
    isFooter: true, // 底部操作按钮是否展示
    footButtonList: {
      cancel: {
        type: 'cancel',
        buttonType: 'default',
        btnText: '取 消',
        btnLoading: false,
        btnLoadingText: '',
      },
      success: {
        type: 'success',
        buttonType: 'primary',
        btnText: '提 交',
        btnLoading: false,
        btnLoadingText: '请求中',
      },
    },
  };
  return Object.assign(option, props?.dialogObject);
});

// 按钮点击事件
const handelButton = (item) => {
  emit('handelDialogButton', item);
};

// 定义暴露事件名
const emit = defineEmits(['handelDialogButton']);
</script>

<style lang="scss" scope>
.lz-dialog {
  .dia-suc {
    margin-left: 16px !important;
  }
}
</style>
